<template>
  <div class="con">
    <gundong :gundong="gundong"></gundong>
    <reying :reyinglist="reyinglist"></reying>
    <!-- <ul>
      <div class="con1">
        <li v-for="item in list" class="item" :key="item.id">
          <div class="item_img"><img :src="item.img" /></div>
          <div class="item_text">
            <div class="item_txt1">{{ item.nm }}</div>
            <div class="item_txt2">
              观众评 <span id="san">{{ item.sc }}</span>
            </div>
            <div class="item_txt3">主演：{{ item.star }}</div>
            <div class="item_txt4">{{ item.showInfo }}</div>
          </div>
          <div class="item_btn">
            <div v-if="item.preShow" class="btn ysbtn">预售</div>
            <div v-else class="btn gpbtn">购票</div>
          </div>
        </li>
      </div>
    </ul> -->
  </div>
</template>

<script>
import axios from "axios";
import gundong from "@/components/hot/gundong";
import reying from '@/components/hot/reying';
// import { component } from 'vue/types/umd';
export default {
  data: function () {
    return {
      reyinglist: [],
      gundong:""
    };
  },
  name: "hot",
  mounted() {
    axios
      .get(
        "/ajax/movieOnInfoList?token=&optimus_uuid=9301B8F0D8A111EBB376757321755EB7A2F821BBA2B047FE86EE9833C24FC202&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        
        console.log(res);
        var reyinglist = res.data.movieList;
        reyinglist.forEach((item) => {
          item.img = item.img.replace("w.h", "64.90");
        });
        this.reyinglist = reyinglist
      });
      axios
      .get(
        "ajax/topRatedMovies?token=&optimus_uuid=9301B8F0D8A111EBB376757321755EB7A2F821BBA2B047FE86EE9833C24FC202&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        console.log(res);
        this.gundong = res.data;
      });
  },
  components:{
        gundong,
    reying,
      }
};
</script>

<style scoped>
.con {
  width: 100%;
  height: auto;
  background: rgb(255, 255, 255);
  margin-top: 154.5px;
  margin-bottom: 60px;
}

.footer {
  width: 100%;
  height: 60px;
  background: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  text-align: center;
  border-top: 2px solid rgb(228, 220, 220);
  /* line-height: 60px; */
}

.footer img {
  width: 25px;
  height: 25px;
  margin-top: 5px;
}

.footer p {
  margin-bottom: 30px;
}

#app {
  font-size: 14px;
}

/* .list {
  margin-top: 20px;
} */

/* .item {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
  border-bottom: 1px solid rgb(202, 195, 195);
  justify-content: space-around;
}

.item .item_img {
  width: 20%;
}

.item .item_img img {
  width: 100%;
}

.item .item_text {
  width: 50%;
  color: #666666;
}

.item .item_text .item_txt1 {
  color: black;
  font-size: 20px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item .item_text .item_txt2 {
  margin-top: 0.3125rem;
}

#san {
  color: #faaf00;
  font-weight: 800;
}

.item .item_text .item_txt3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item .item_text .item_txt4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item .item_btn {
  width: 20%;
  display: flex;
  align-items: center;
}

.item .item_btn .btn {
  width: 2.933333rem;
  height: 1.866667rem;
  font-size: 12px;
  color: #fff;
  border-radius: 5px;
  line-height: 1.866667rem;
  text-align: center;
}

.item .item_btn .gpbtn {
  background: #f03d37;
  margin-left: 15px;
}

.item .item_btn .ysbtn {
  background: #3c9fe6;
} */

</style>